<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";

import { useBarStore } from '@/store'
const store = useBarStore();
store.getSessionTabList

const router = useRouter();
let uname = ref<String>('admin');
let upwd = ref<String>('123456');

if(localStorage.getItem('myAdmin')){
    router.push({
        path: "/index"
    });
}

let submit = ()=>{
    // 测试axios
    // proxy.$axios.get('/mock/14/fjysb/lftShit').then((res: any)=>{
    //     console.log('axios,res :>> ', res);
    // })

    if(uname.value === '' || upwd.value === ''){
        ElMessage({
            message: '请输入账户名和密码',
            type: 'error',
        })

        return ;
    }

    if(uname.value === 'admin' && upwd.value === '123456'){
        ElMessage({
            message: 'admin，欢迎您',
            type: 'success',
        })

        localStorage.setItem('myAdmin',new Date().getTime().toString())
        localStorage.setItem('myAuth','admin')

        router.push({
            path: "/index"
        });
    }else if(uname.value === 'user' && upwd.value === '123456'){
        ElMessage({
            message: 'user，欢迎您',
            type: 'success',
        })

        localStorage.setItem('myAdmin',new Date().getTime().toString())
        localStorage.setItem('myAuth','user')

        router.push({
            path: "/index"
        });
    }else{
        ElMessage({
            message: '账户名或密码错误',
            type: 'error',
        })
    }
}

const defaultUserList = ():void =>{
    localStorage.setItem('user',JSON.stringify(
        [
            {
                id:0,
                user:'admin',
                pwd:123456
            },
            {
                id:1,
                user:'user',
                pwd:123456
            }
        ]
    ));

    localStorage.setItem('adminList',JSON.stringify(
        [0]
    ));
    localStorage.setItem('userList',JSON.stringify(
        [1]
    ));
}

defaultUserList()
</script>

<template>
    <div id="login">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
        <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
        <h1>Login</h1>
        <div>
            <el-input v-model="uname" placeholder="请输入用户名" style="margin-bottom:5px" />
            <el-input type="password" v-model="upwd" placeholder="请输入密码" style="margin-bottom:5px"/>
            <el-button type="primary" style="width:100%" @click="submit">登录</el-button>
        </div>

    </div>
</template>

<style scoped>
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
}
body {
    width: 100%;
    height: 100%;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    background-color: #4a374a;
}
#login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}
#login h1 {
    color: #fff;
    text-shadow: 0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
input {
    width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px;
    border-top: 1px solid #312e3d;
    border-left: 1px solid #312e3d;
    border-right: 1px solid #312e3d;
    border-bottom: 1px solid #56536a;
    border-radius: 4px;
    background-color: #2d2d3f;
}
.but {
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
